{% extends "base.html" %}
{% block title %}用户注册 - 安全认证系统{% endblock %}

{% block content %}
<div class="auth-container register-bg">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md-8 layui-col-lg-6 layui-col-offset-md-2 layui-col-offset-lg-3">
                <div class="auth-card">
                    <div class="auth-header">
                        <h2><i class="fas fa-user-plus"></i> 创建账户</h2>
                        <p>加入我们的安全系统</p>
                    </div>

                    <form class="layui-form auth-form" id="register-form">
                        <div class="form-group">
                            <div class="input-with-icon">
                                <i class="fas fa-user"></i>
                                <input type="text" name="username" required lay-verify="required|username"
                                    placeholder="请输入用户名（3-20个字符）" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-with-icon">
                                <i class="fas fa-envelope"></i>
                                <input type="text" name="email" required lay-verify="required|email"
                                    placeholder="请输入邮箱地址" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-with-icon">
                                <i class="fas fa-lock"></i>
                                <input type="password" name="password" id="password" required
                                    lay-verify="required|password" placeholder="设置登录密码（至少8位）" autocomplete="off"
                                    class="layui-input">
                                <i class="fas fa-eye-slash toggle-password" data-target="#password"></i>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-with-icon">
                                <i class="fas fa-check-circle"></i>
                                <input type="password" name="confirm" required lay-verify="required|confirmPass"
                                    placeholder="确认登录密码" autocomplete="off" class="layui-input" id="confirm">
                                <i class="fas fa-eye-slash toggle-password" data-target="#confirm"></i>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="captcha-container">
                                <div class="captcha-input-container">
                                    <div class="input-with-icon">
                                        <i class="fas fa-shield-alt"></i>
                                        <input type="text" name="captcha" required lay-verify="required"
                                            placeholder="请输入验证码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="captcha-img-container">
                                    <img src="/captcha" id="captcha-img" class="captcha-img" alt="验证码" title="点击刷新验证码">
                                    <div class="captcha-refresh">点击图片刷新验证码</div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group agreement-group inline-label">
                            <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" required
                                id="agreement">
                            <label>
                                我已阅读并同意
                                <a href="#" style="color: #1e9fff;">服务条款</a> 和
                                <a href="#" style="color: #1e9fff;">隐私政策</a>
                            </label>
                        </div>

                        <div class="form-group">
                            <button class="layui-btn layui-btn-fluid auth-btn" lay-submit lay-filter="register">
                                <i class="fas fa-user-plus"></i> 注册账户
                            </button>
                        </div>

                        <div class="auth-footer">
                            已有账号? <a href="/login" class="login-link">立即登录</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    layui.use(['form', 'jquery', 'layer'], function () {
        var form = layui.form;
        var $ = layui.$;
        var layer = layui.layer;
        form.render();

        // 刷新验证码
        $('#captcha-img').click(function () {
            $(this).attr('src', '/captcha?' + Math.random());
        });

        $('.toggle-password').on('click', function () {
            var $icon = $(this);
            var targetId = $icon.data('target');
            var $input = $(targetId);

            if ($input.attr('type') === 'password') {
                $input.attr('type', 'text');
                $icon.removeClass('fa-eye-slash').addClass('fa-eye');
            } else {
                $input.attr('type', 'password');
                $icon.removeClass('fa-eye').addClass('fa-eye-slash');
            }
        });

        // 自定义表单验证规则
        form.verify({
            username: function (value) {
                if (!/^[a-zA-Z0-9_]{3,20}$/.test(value)) {
                    return '用户名只能包含字母、数字和下划线，长度3-20个字符';
                }
            },
            email: function (value) {
                if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value)) {
                    return '请输入有效的邮箱地址';
                }
            },
            password: function (value) {
                if (value.length < 8) {
                    return '密码长度至少为8个字符';
                }
                if (!/[A-Z]/.test(value)) {
                    return '密码必须包含至少一个大写字母';
                }
                if (!/[a-z]/.test(value)) {
                    return '密码必须包含至少一个小写字母';
                }
                if (!/\d/.test(value)) {
                    return '密码必须包含至少一个数字';
                }
                if (!/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(value)) {
                    return '密码必须包含至少一个特殊字符';
                }
            },
            confirmPass: function (value) {
                if (value !== $('#password').val()) {
                    return '两次输入的密码不一致';
                }
            }
        });


        // 表单提交
        form.on('submit(register)', function (data) {
            var loadIndex = layer.load(2);
            var formData = $.extend({}, data.field, {
                csrf_token: $('meta[name="csrf-token"]').attr('content')
            });

            $.ajax({
                url: '/auth/register',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(formData),
                success: function (res) {
                    layer.close(loadIndex);
                    if (res.message) {
                        layer.msg(res.message, { icon: 1 });
                        setTimeout(function () {
                            location.href = '/login';
                        }, 1500);
                    } else {
                        // 刷新验证码
                        $('#captcha-img').attr('src', '/captcha?' + Math.random());
                        layer.msg(res.error || '注册失败', { icon: 2 });
                    }
                },
                error: function (xhr) {
                    layer.close(loadIndex);
                    var res = xhr.responseJSON;
                    layer.msg(res?.error || "服务器错误", { icon: 2 });
                    // 刷新验证码
                    $('#captcha-img').attr('src', '/captcha?' + Math.random());
                }
            });
            return false;
        });
    });
</script>
{% endblock %}